import React from 'react'
import {actions} from 'mirrorx'
// import {FormattedMessage} from 'react-intl'
import { Tabs } from 'antd-mobile'

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      effectList: [],
      invalidList: [],
      processingList: []
    }

    if (!T.cookie.get('uid')) {
      actions.routing.push({pathname: '/', search: 'backurl=' + encodeURIComponent(location.href)})
    }
  }

  componentDidMount () {
    if (T.cookie.get('uid')) {
      this.getList(1) // 1 - 有效 2 - 无效 3 - 处理中
    }
  }

  getList (state) {
    T.fetchFusion({
      url: '/fusion/yj/queryPolicy',
      loading: true,
      data: {
        'state': state,
        'pageIndex': 1,
        'pageSize': 1000
      }
    }).then((res) => {
      if (res.success) {
        if (state === 1) {
          this.setState({
            effectList: res.value.resultList
          })
        } else if (state === 2) {
          this.setState({
            invalidList: res.value.resultList
          })
        } else {
          this.setState({
            processingList: res.value && res.value.resultList
          })
        }
      }
    })
  }

  render () {
    const Lang = window.LangMessage || {}
    const tabs = [
      { title: Lang.valid || 'valid' }, { title: Lang.uneffective || 'invalid' }, { title: Lang.dealing || 'processing' }
    ]
    const { effectList = [], invalidList = [], processingList = [] } = this.state
    return (<div className='policy-list-yj-page'>
      <Tabs tabs={tabs}
        initialPage={0}
        onChange={(tab, index) => { this.getList(index + 1) }}
      >
        {[1, 2, 3].map((item, index) => {
          let list = item === 1 ? effectList : (item === 2 ? invalidList : processingList)
          let borderColor = item === 1 ? 'diy_border' : (item === 2 ? 'invalid-border' : 'processing-border')
          return (
            <div className='content' key={item}>
              <ul className='list'>
                {list.map((subItem, subIndex) => {
                  return (
                    <li className={`item mb30 ${borderColor}`} key={subIndex} onClick={() => { window.location.href = '/policy-detail-yj?policyNo=' + subItem.orderNo + '&state=' + item + '&goodsName=' + subItem.goodsName }}>
                      <div className='name f36'>
                        {subItem.goodsName}
                      </div>
                      <div className='detail mt25'>
                        <div className='detail-item'>
                          {Lang.insurant}:
                          {subItem.insurant && subItem.insurant.name}
                        </div>
                        {item !== 3 && (
                          <div className='detail-item'>満期日 {subItem.insuredEnd}</div>
                        )}
                      </div>
                    </li>
                  )
                })}
                {list.length === 0 && (
                  <div className='f30 bgw no-data'> NO Data</div>
                )}
              </ul>
            </div>
          )
        })}
      </Tabs>
    </div>)
  }
}

export default App
